import React, { Component } from 'react';
import styles from './SelectSeach.css';
import { Select} from 'antd';
import {request,requestJSON,requestForData} from '../../../utils/request';

class SelectSeach extends Component {
  constructor(props) {
    super(props);
    const value = this.props.value || {};  
    this.state = {
      loading: false,
      options:null,
      value: value.value ||"",
    };
  }

   componentWillReceiveProps(nextProps) {   
    if ('value' in nextProps) {
      const value = nextProps.value;       
      this.setState(value);
    }
  }

  componentWillMount (){   
    getData(this.props.dataSourceURL).then(data=>{      
      this.setState({
        loading:true,
        options:data.data.records
      }) 
    });
    
  }

  
   handleCurrencyChange = (value) => {
    if (!('value' in this.props)) { 
      this.setState({ value });
    }
    this.triggerChange({ value });
  }
  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {     
      onChange(changedValue);      
    }
  }

  render(){ 
    let optionRs=null;
    if(this.state.loading){
      let datas=this.state.options;     
      optionRs=datas.map(item=>{
         return <Option value={item.id}>{item.name}</Option>
      })
    }  
   if(!this.state.loading){
      return (
        <div>loading</div>
      )
   }else{    
     return(      
          <Select            
            showSearch 
            placeholder=""
            optionFilterProp="children"  
            onChange={this.handleCurrencyChange}          
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} placeholder="Select a option and change input text above">         
            {optionRs}           
          </Select>
    ); 
   }      
  }  
}



function getData(dataSourceURL){
  return request(dataSourceURL, {
    method: 'GET'   
  }); 
}


export default SelectSeach;
